@import "mixin.scss";
.modal {
    @include position(fixed);
		//不加背景才能显示父组件
    z-index: 10;
    transition: all .5s;
    p{
        text-align: center;
    }
    .mask {
        @include position(fixed);
        background-color: $colorI;
        opacity: 0.5;
    }
		
    //注意模态框定义顺序
    &.slide-enter-active{
        top:0;
    }
    &.slide-leave-active{
        top:-100%;
    }
    &.slide-enter{
        top:-100%
    }
    .modal-dialog{
        @include position(absolute,72%,50%,90%,auto);
				@include border-radius(10rpx,10rpx,10rpx,10rpx);
        transform: translate(-50%,-70%);
				 background-color: $colorG;
        .modal-header{
            padding: 0 20rpx;
            line-height: 60rpx;
            .icon-close{
								z-index: 1000;
							// @/static/images/icon/Product/close.png
                @include positionImg(absolute,20rpx,20rpx,40rpx,40rpx,'@/static/images/icon/product/close.png');
                transition:transform .3s;
                &:hover{
                    transform: scale(1.5);
                }
            }
        }
        .modal-body{
					width: 100%;
          font-size: 14*2rpx;
        }
        .modal-footer{
            height: 90rpx;
            line-height: 90rpx;
            text-align: center;
            background-color: $colorA; 
						@include border-radius(0,0,10rpx,10rpx);
						position: relative;
					.modal-attr{
						position: absolute;
						bottom: 90rpx;
						left: 0;
						width: 100%;
						height: 140rpx;
						line-height: 70rpx;
						background-color: $colorF;
						padding: 20rpx 40rpx;
						@include flex(flex-start, center);
						.attr-box{
							@include flex(flex-start, flex-start);
							flex-wrap: wrap;
							width: 70%;
							text-align: left;
							.attr-title{
								width: 100%;
								height: 60rpx;
								line-height: 60rpx;
								font-weight: bold;
								@include fontStyle($fontD,black);
							}
							.attr-price{
								width: 100%;
								height: 40rpx;
								line-height: 40rpx;
								@include fontStyle($fontF);
								text{
									&:after{
										content: "/";
										margin: 0 10rpx;
									}
								}
							}
						}
						.count-box{
							width: 30%;
							height: 140rpx;
							line-height: 140rpx;
							@include flex(flex-end, center);
							.icon-add,.icon-reduce{
								width: 40rpx;
								height: 40rpx;
								line-height: 30rpx;
								border-radius: 50% ;
							}		
							// 减
							.icon-reduce{ 
								box-sizing: border-box;
								// padding: 0 4rpx;
								overflow: hidden;
								border: 1rpx solid #999999;
								@include fontStyle($fontB,#999999);
							}			
							.count{
								width: 60rpx;
								height: 50rpx;
								line-height: 50rpx;
								// border: 1rpx solid #999;
							}
							// 加
							.icon-add{
								background-color: $colorA;
								border: 1rpx solid $colorA;
								@include fontStyle($fontB,#FFF);
							}
							
						}
					}
        }
    }
}
